/**
 * Select 选择器
 * 实现功能:
 *   1. 点击输入框弹出选项列表
 *   2. 选中列表项内容赋值给输入框并关闭选项列表
 *   3. 点击其它区域关闭选项列表
 */
(function () {
    function YSelect(selector) {
        let root = document.querySelector(selector);
        let inputSpan = root.getElementsByTagName('span')[0];
        let listWrap = root.getElementsByTagName('dd')[0];
        // 1. 点击输入框弹出选项列表
        inputSpan.addEventListener('click', function () {
            event.stopPropagation(); // 阻止事件冒泡
            listWrap.classList.add('open-select');
        })

        //2. 选中列表项内容赋值给输入框并关闭选项列表
        listWrap.addEventListener('click', function () {
            let e = event || window.event;
            e.stopPropagation(); // 阻止事件冒泡
            let target = e.target || e.srcElement;
            if (target.nodeName == 'A') {
                inputSpan.innerHTML = target.innerHTML;
                listWrap.classList.remove('open-select');
            }
        })

        //3. 点击其它区域关闭选项列表
        document.addEventListener('click', function () {
            listWrap.classList.remove('open-select');
        })

    }

    YSelect('#vegetable');
    YSelect('#fruits');

})()